<div class="demo-tooltip">
  <h1>Tooltip Demo</h1>

  <div class="centered" cdk-scrollable>
    <button #tooltip="mdTooltip"
            md-raised-button
            color="primary"
            [mdTooltip]="message"
            [mdTooltipPosition]="position"
            [mdTooltipDisabled]="disabled"
            [mdTooltipShowDelay]="showDelay"
            [mdTooltipHideDelay]="hideDelay"
            [mdTooltipClass]="{'red-tooltip': showExtraClass}">
      Mouse over to see the tooltip
    </button>
    <div>Scroll down while tooltip is open to see it hide automatically</div>
    <div style="height: 400px;"></div>
  </div>

  <p>
    <md-radio-group [(ngModel)]="position">
      <md-radio-button value="below">Below</md-radio-button>
      <md-radio-button value="above">Above</md-radio-button>
      <md-radio-button value="left">Left</md-radio-button>
      <md-radio-button value="right">Right</md-radio-button>
      <md-radio-button value="before">Before</md-radio-button>
      <md-radio-button value="after">After</md-radio-button>
    </md-radio-group>
  </p>
  <p>
    <strong>Message: </strong>
    <md-input-container><input mdInput type="text" [(ngModel)]="message"></md-input-container>
  </p>

  <p>
    <strong>Disabled: </strong>
    <md-checkbox [(ngModel)]="disabled"></md-checkbox>
  </p>

  <p>
    <strong>Show Delay (ms): </strong>
    <md-input-container>
      <input mdInput type="number" [(ngModel)]="showDelay">
    </md-input-container>
  </p>

  <p>
    <strong>Hide Delay (ms): </strong>
    <md-input-container>
      <input mdInput type="number" [(ngModel)]="hideDelay">
    </md-input-container>
  </p>

  <strong>Mouse over to</strong>
  <button md-raised-button color="primary" (mouseenter)="tooltip.show()">
    Show tooltip
  </button>
  <button md-raised-button color="primary" (mouseenter)="tooltip.hide()">
    Hide tooltip
  </button>
  <button md-raised-button color="primary" (mouseenter)="tooltip.toggle()">
    Toggle tooltip
  </button>
  <button md-raised-button color="primary" (mouseenter)="showExtraClass = !showExtraClass">
    Toggle tooltipClass
  </button>
</div>
